import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.2

Rectangle{
    width: 1280
    height: 775
    color:"cadetblue";
    Rectangle{
        id:realupper;
        x:0;y:0;
        width: 1280;
        height: 85;
        color:"cadetblue";
        Rectangle{
            x:0;y:0
            width: 1280
            height:60
            color:"cadetblue"
            Text{
                text:"1#锅炉"
                x:30;y:20
                color: "yellow"
                font.family: "Ubuntu"
                font.pixelSize: 25
            }
            Rectangle{
                x:350;y:0;
                width: 500; height: 60;
                color:"cadetblue";
                Text{
                    text:"系统状态";
                    color:"yellow";
                    font.family: "Ubuntu";
                    font.pixelSize: 20;
                    y:3;
                    anchors.horizontalCenter: parent.horizontalCenter;
                }
                Rectangle{
                    y:25;anchors.horizontalCenter: parent.horizontalCenter;
                    width: 430; height: 30;
                    color:"cadetblue";
                    Rectangle{
                        x:0;y:5;
                        width: 130; height: 20;
                        color:"#CCEEFF";
                    }
                    Rectangle{
                        x:150;y:5;
                        width: 130; height: 20;
                        color:"#CCEEFF";
                    }
                    Rectangle{
                        x:300;y:5;
                        width: 130; height: 20;
                        color:"#CCEEFF";
                    }
                }
            }
            Rectangle{
                x:950;y:10;
                width: 200; height: 40;
                color:"black";
                Timer {
                    interval: 500; running: true; repeat: true
                    onTriggered: realtimeview.text = Qt.formatDateTime(new Date(),
                                            "yyyy-MM-dd hh:mm:ss")
                }
                Text{
                    id:realtimeview
                    anchors.centerIn: parent;
                    color: "yellow"
                    font.family: "Ubuntu"
                    font.pixelSize: 15
                }
            }
        }
    }
    Rectangle{
        id:realbottom;
        x:0;y:75;
        width: 1280;
        height: 700;
        color:"cadetblue";
        Rectangle{
            id:realbottom1
            width:1280;height:350;
            color:"cadetblue";
            Rectangle{
                width:100;height:350;
                color:"cadetblue";
                Rectangle{
                    x:1
                    width:100;height:170;
                    color:"cadetblue";
                    border.color: "black";
                    border.width: 1;
                    Text{
                        y:5
                        text:"上限"
                        font.pixelSize: 15
                        color:"yellow"
                        anchors.horizontalCenter: parent.horizontalCenter;
                    }
                    Rectangle{
                        x:1
                        y:20
                        width:98
                        height:130
                        color:"cadetblue";
                        Slider{
                            id:s
                            width: 30;
                            height: 100;
                            orientation: Qt.Vertical;
                            stepSize: 2;
                            maximumValue:5000
                            anchors.centerIn: parent;
                        }
                        Rectangle{
                            width: 30
                            height:15
                            anchors.horizontalCenter: parent.horizontalCenter;
                            y:s.y+s.height+5
                            color:"white"
                            Text{
                                text:s.value
                                font.pixelSize: 15
                                anchors.centerIn:parent
                            }
                        }
                    }
                }
                Rectangle{
                    x:1
                    width:100;height:170;
                    y:180
                    color:"cadetblue";
                    border.color: "black";
                    border.width: 1;
                    Text{
                        y:5
                        text:"下限"
                        font.pixelSize: 15
                        color:"yellow"
                        anchors.horizontalCenter: parent.horizontalCenter;
                    }
                    Rectangle{
                        x:1
                        y:20
                        width:98
                        height:130
                        color:"cadetblue";
                        Slider{
                            id:sli
                            width: 30;
                            height: 100;
                            orientation: Qt.Vertical;
                            stepSize: 2;
                            maximumValue:50
                            anchors.centerIn: parent;
                        }
                        Rectangle{
                            x:1
                            width: 30
                            height:15
                            anchors.horizontalCenter: parent.horizontalCenter;
                            y:sli.y+sli.height+5
                            color:"white"
                            Text{
                                text:sli.value
                                font.pixelSize: 15
                                anchors.centerIn:parent
                            }
                        }
                    }
                }
            }
            Rectangle{
                x:100;
                width:900;height:350;
                color:"cadetblue";
                border.color: "black";
                border.width: 1;
                Text{
                    text:"SO2/NO2/颗粒物/O2"
                    x:5;y:5
                    color: "black"
                    font.family: "Ubuntu"
                    font.pixelSize: 15
                }
                Rectangle{
                    id:table1
                    x:100;anchors.verticalCenter: parent.verticalCenter
                    width:750;height:280;
                    color: "black"
                }
                Text{
                    text:s.value
                    x:table1.x-40;y:table1.y
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"0"
                    x:table1.x-40;y:table1.y+70
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"0"
                    x:table1.x-40;y:table1.y+140
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"0"
                    x:table1.x-40;y:table1.y+210
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"0"
                    x:table1.x-40;y:table1.y+280
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"16:13:55"
                    x:table1.x;y:table1.y+290
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"16:13:55"
                    x:table1.x+table1.width-50;y:table1.y+290
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
            }
            Rectangle{
                x:1000;
                width:280;height:350;
                color:"cadetblue";
                border.color: "black";
                border.width: 1;
                Rectangle{
                    y:5;x:30
                    color: "#E6E6FA";
                    width: 130; height: 30;
                    Text{
                        text:"切换到另一路";
                        anchors.centerIn: parent;
                        color: "black";
                        font.family: "Ubuntu";
                        font.pixelSize: 15;
                    }
                }
                Rectangle{
                    x:40;y:40;
                    width:50;height:10;
                    color:"cadetblue";
                    Component{
                        id:boxstyle
                        CheckBoxStyle {
                            indicator: Rectangle {
                                implicitWidth: 15
                                implicitHeight: 15
                                border.color: control.activeFocus ? "darkblue" : "gray"
                                border.width: 1
                                Rectangle {
                                    visible: control.checked
                                    color: "#555"
                                    border.color: "#333"
                                    radius: 1
                                    anchors.margins: 4
                                    anchors.fill: parent
                                }
                            }
                        }
                    }
                    Text{
                        id:t
                        text:"曲线选择"
                        font.pixelSize: 15;
                    }
                }
                Rectangle{
                    x:30;y:60
                    width:110;height:100;
                    color:"cadetblue";
                    border.color: "white";
                    border.width: 2;
                    radius: 10;
                    Column{
                        x:10;y:4
                        spacing: 4
                        CheckBox{
                            text:qsTr("SO2")
                            style:boxstyle
                        }
                        CheckBox{
                            text:qsTr("NO2")
                            style:boxstyle
                        }
                        CheckBox{
                            text:qsTr("NO")
                            style:boxstyle
                        }
                        CheckBox{
                            text:qsTr("CO2")
                            style:boxstyle
                        }
                        CheckBox{
                            text:qsTr("颗粒物")
                            style:boxstyle
                        }
                    }
                }
                Rectangle{
                    x:30;y:170
                    width:200;height:150
                    color:"cadetblue";
                    Column{
                        spacing: 15
                        Rectangle{
                          width:200;height:20
                          color:"cadetblue";
                          Rectangle{
                              color:"red"
                              width:50;height:20
                              Text{
                                  text:"SO2"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Rectangle{
                              x:65
                              color:"cadetblue"
                              width:90;height:20
                              border.color: "black";
                              border.width: 1;
                              Text{
                                  text:"23"
                                  color:"white"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Text{
                              x:170
                              text:"mg/Nm3"
                              color:"white"
                              font.pixelSize: 15
                              anchors.verticalCenter: parent.verticalCenter
                          }
                        }
                        Rectangle{
                          width:200;height:20
                          color:"cadetblue";
                          Rectangle{
                              color:"#2894FF"
                              width:50;height:20
                              Text{
                                  text:"NOx"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Rectangle{
                              x:65
                              color:"cadetblue"
                              width:90;height:20
                              border.color: "black";
                              border.width: 1;
                              Text{
                                  text:"23"
                                  color:"white"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Text{
                              x:170
                              text:"mg/Nm3"
                              color:"white"
                              font.pixelSize: 15
                              anchors.verticalCenter: parent.verticalCenter
                          }
                        }
                        Rectangle{
                          width:200;height:20
                          color:"cadetblue";
                          Rectangle{
                              color:"#FF79BC"
                              width:50;height:20
                              Text{
                                  text:"CO"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Rectangle{
                              x:65
                              color:"cadetblue"
                              width:90;height:20
                              border.color: "black";
                              border.width: 1;
                              Text{
                                  text:"23"
                                  color:"white"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Text{
                              x:170
                              text:"mg/Nm3"
                              color:"white"
                              font.pixelSize: 15
                              anchors.verticalCenter: parent.verticalCenter
                          }
                        }
                        Rectangle{
                          width:200;height:20
                          color:"cadetblue";
                          Rectangle{
                              color:"#FFFF6F"
                              width:50;height:20
                              Text{
                                  text:"O2"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Rectangle{
                              x:65
                              color:"cadetblue"
                              width:90;height:20
                              border.color: "black";
                              border.width: 1;
                              Text{
                                  text:"23"
                                  color:"white"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Text{
                              x:170
                              text:"mg/Nm3"
                              color:"white"
                              font.pixelSize: 15
                              anchors.verticalCenter: parent.verticalCenter
                          }
                        }
                        Rectangle{
                          width:200;height:20
                          color:"cadetblue";
                          Rectangle{
                              color:"#1AFD9C"
                              width:50;height:20
                              Text{
                                  text:"颗粒物"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Rectangle{
                              x:65
                              color:"cadetblue"
                              width:90;height:20
                              border.color: "black";
                              border.width: 1;
                              Text{
                                  text:"23"
                                  color:"white"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Text{
                              x:170
                              text:"mg/Nm3"
                              color:"white"
                              font.pixelSize: 15
                              anchors.verticalCenter: parent.verticalCenter
                          }
                        }
                    }
                }
            }
        }
        Rectangle{
            width:1280;height:350;
            y:realbottom1.y+realbottom1.height
            color:"cadetblue";
            Rectangle{
                width:100;height:350;
                color:"cadetblue";
                Rectangle{
                    x:1
                    width:100;height:170;
                    color:"cadetblue";
                    border.color: "black";
                    border.width: 1;
                    Text{
                        y:5
                        text:"上限"
                        font.pixelSize: 15
                        color:"yellow"
                        anchors.horizontalCenter: parent.horizontalCenter;
                    }
                    Rectangle{
                        x:1
                        y:20
                        width:98
                        height:130
                        color:"cadetblue";
                        Slider{
                            id:s1
                            width: 30;
                            height: 100;
                            orientation: Qt.Vertical;
                            stepSize: 2;
                            maximumValue:50
                            anchors.centerIn: parent;
                        }
                        Rectangle{
                            width: 30
                            height:15
                            anchors.horizontalCenter: parent.horizontalCenter;
                            y:s1.y+s1.height+5
                            color:"white"
                            Text{
                                text:s1.value
                                font.pixelSize: 15
                                anchors.centerIn:parent
                            }
                        }
                    }
                }
                Rectangle{
                    x:1
                    width:100;height:170;
                    y:180
                    color:"cadetblue";
                    border.color: "black";
                    border.width: 1;
                    Text{
                        y:5
                        text:"下限"
                        font.pixelSize: 15
                        color:"yellow"
                        anchors.horizontalCenter: parent.horizontalCenter;
                    }
                    Rectangle{
                        x:1
                        y:20
                        width:98
                        height:130
                        color:"cadetblue";
                        Slider{
                            id:sli1
                            width: 30;
                            height: 100;
                            orientation: Qt.Vertical;
                            stepSize: 2;
                            maximumValue:50
                            anchors.centerIn: parent;
                        }
                        Rectangle{
                            x:1
                            width: 30
                            height:15
                            anchors.horizontalCenter: parent.horizontalCenter;
                            y:sli1.y+sli1.height+5
                            color:"white"
                            Text{
                                text:sli1.value
                                font.pixelSize: 15
                                anchors.centerIn:parent
                            }
                        }
                    }
                }
            }
            Rectangle{
                x:100;
                width:900;height:350;
                color:"cadetblue";
                border.color: "black";
                border.width: 1;
                Text{
                    text:"SO2/NO2/颗粒物/O2"
                    x:5;y:5
                    color: "black"
                    font.family: "Ubuntu"
                    font.pixelSize: 15
                }
                Rectangle{
                    id:table11
                    x:100;anchors.verticalCenter: parent.verticalCenter
                    width:750;height:280;
                    color: "black"
                }
                Text{
                    text:"0"
                    x:table11.x-40;y:table11.y
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"0"
                    x:table11.x-40;y:table11.y+70
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"0"
                    x:table11.x-40;y:table11.y+140
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"0"
                    x:table11.x-40;y:table11.y+210
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"0"
                    x:table11.x-40;y:table11.y+280
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"16:13:55"
                    x:table11.x;y:table11.y+290
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
                Text{
                    text:"16:13:55"
                    x:table11.x+table11.width-50;y:table11.y+290
                    font.pixelSize: 15
                    font.family: "Ubuntu"
                }
            }
            Rectangle{
                x:1000;
                width:280;height:350;
                color:"cadetblue";
                border.color: "black";
                border.width: 1;
                Rectangle{
                    x:40;y:40;
                    width:50;height:10;
                    color:"cadetblue";
                    Text{
                        text:"曲线选择"
                        font.pixelSize: 15;
                    }
                }
                Rectangle{
                    x:30;y:60
                    width:110;height:100;
                    color:"cadetblue";
                    border.color: "white";
                    border.width: 2;
                    radius: 10;
                    Column{
                        x:10;y:13
                        spacing: 4
                        CheckBox{
                            text:qsTr("温度")
                            style:boxstyle
                        }

                        CheckBox{
                            text:qsTr("压力")
                            style:boxstyle
                        }
                        CheckBox{
                            text:qsTr("流速")
                            style:boxstyle
                        }
                        CheckBox{
                            text:qsTr("湿度")
                            style:boxstyle
                        }
                    }
                }
                Rectangle{
                    x:30;y:170
                    width:200;height:150
                    color:"cadetblue";
                    Column{
                        spacing: 15
                        Rectangle{
                          width:200;height:20
                          color:"cadetblue";
                          Rectangle{
                              color:"#80FFFF"
                              width:50;height:20
                              Text{
                                  text:"温度"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Rectangle{
                              x:65
                              color:"cadetblue"
                              width:90;height:20
                              border.color: "black";
                              border.width: 1;
                              Text{
                                  text:"23"
                                  color:"white"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Text{
                              x:170
                              text:"℃"
                              color:"white"
                              font.pixelSize: 15
                              anchors.verticalCenter: parent.verticalCenter
                          }
                        }
                        Rectangle{
                          width:200;height:20
                          color:"cadetblue";
                          Rectangle{
                              color:"#FCFCFC"
                              width:50;height:20
                              Text{
                                  text:"压力"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Rectangle{
                              x:65
                              color:"cadetblue"
                              width:90;height:20
                              border.color: "black";
                              border.width: 1;
                              Text{
                                  text:"23"
                                  color:"white"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Text{
                              x:170
                              text:"Pa"
                              color:"white"
                              font.pixelSize: 15
                              anchors.verticalCenter: parent.verticalCenter
                          }
                        }
                        Rectangle{
                          width:200;height:20
                          color:"cadetblue";
                          Rectangle{
                              color:"#7D7DFF"
                              width:50;height:20
                              Text{
                                  text:"流速"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Rectangle{
                              x:65
                              color:"cadetblue"
                              width:90;height:20
                              border.color: "black";
                              border.width: 1;
                              Text{
                                  text:"23"
                                  color:"white"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Text{
                              x:170
                              text:"m/s"
                              color:"white"
                              font.pixelSize: 15
                              anchors.verticalCenter: parent.verticalCenter
                          }
                        }
                        Rectangle{
                          width:200;height:20
                          color:"cadetblue";
                          Rectangle{
                              color:"#FF9D6F"
                              width:50;height:20
                              Text{
                                  text:"湿度"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Rectangle{
                              x:65
                              color:"cadetblue"
                              width:90;height:20
                              border.color: "black";
                              border.width: 1;
                              Text{
                                  text:"23"
                                  color:"white"
                                  font.pixelSize: 15
                                  anchors.centerIn: parent;
                              }
                          }
                          Text{
                              x:170
                              text:"%"
                              color:"white"
                              font.pixelSize: 15
                              anchors.verticalCenter: parent.verticalCenter
                          }
                        }
                    }
                }
            }
        }

    }
}
